<template>
    <div>
        <van-field v-model="tel" placeholder="请输入手机号"/>
        <van-button class="login_button" :disabled="flag" round type="danger" size="large" @click="step">下一步</van-button>
        <p class="note">
          <van-checkbox icon-size="16" v-model="checked" >同意*******协议</van-checkbox>
        </p>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Field, Button, Dialog, Toast, Checkbox } from 'vant'
import { docheckphone } from '@/api/register'

Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Toast)
Vue.use(Checkbox)
export default {
  computed: {
    flag () {
      return !/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(this.tel)
    }
  },
  data () {
    return {
      tel: '',
      checked: false
    }
  },
  methods: {
    step () {
      if (!this.checked) {
        Dialog.confirm({
          message: '请先勾选用户协议',
          cancelButtonText: '取消',
          confirmButtonText: '同意并且继续'
        })
          .then(() => {
            this.checked = true
            this.skip()
          })
          .catch(() => {})
      } else {
        this.skip()
      }
    },
    async skip () {
      var res = await docheckphone({ tel: this.tel })
      console.log(res)
      if (res.data.code === '10005') {
        Dialog.confirm({
          message: '该用户已注册，是否直接登录',
          cancelButtonText: '登录',
          confirmButtonText: '取消'
        })
          .then(() => {
            this.$router.back()
          })
          .catch(() => {})
      } else {
        localStorage.setItem('tel', this.tel)
        Dialog.confirm({
          message: '我们将发送短信验证码至<br/>' + this.tel,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(() => {
            this.$router.push({ path: '/register/step2' })
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.note
  position fixed
  bottom 5px
  left 50%
  transform translateX(-50%)
  opacity 0.4
</style>
